<template>
  <div>
    <div class="breadcrumb_wrap">
      <span class="current">当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/personalcenter' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>作品中心</el-breadcrumb-item>
        <el-breadcrumb-item>草稿箱</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button
        style="position: absolute; right: 10px; top: 5px"
        type="primary"
        plain
        size="small"
        @click="toDoctorCertify"
      >医生认证</el-button>
    </div>

    <div class="page_card">
      <articleShow hasDel hasEdit :articleList='draftList' @delete="handleArticleDel"  />
    </div>

  </div>
</template>


<script>
import articleShow from "@/components/draftsArticle.vue";
export default {
  name: 'works',
  components: {
    articleShow
  },
  watch: {
    $route: {
      handler() {
        this.tabsActive = this.$route.query.tab;
      },
      deep: true,
    },
  },
  data() {
    return {
      tabsActive: 'pub',

	  draftList:[],
	  hasDel:true,
	  hasEdit:true
    }
  },
  mounted() {
  	this.getDraftList();
  },
  methods: {
    handleArticleDel(draftId) {
        // console.log(draftId);
        this.cancelDrafts(draftId);
    },
    //跳转到医生认证
    toDoctorCertify() {
      this.$router.push("/doctorCertify");
    },

	async getDraftList(){
		const res = await this.$api.reqDraftList(this.$cookies.get('userId'));
		if(res.code==200){
			this.draftList=res.rows;
		}
	},
  async cancelDrafts(userId,ardId){
    const res = await this.$api.reqCancelDrafts(userId,ardId);
    if(res.code===200){
      this.$message({
        type: "success",
        message: "删除成功",
      });
    	this.getDraftList();
    }
  }
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb_wrap {
  width: 100%;
  height: 40px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
  .current {
    font-size: 14px;
  }
}
.page_card{
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}
</style>
